<template>
	<view class="image-preview">
		<view class="image-grid">
			<view class="image-item" v-for="(item, index) in images" :key="index" @click="previewImage(index)">
				<image :src="item" mode="aspectFill" class="preview-image" @error="handleImageError"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ImagePreview',
	props: {
		images: {
			type: Array,
			default: () => []
		}
	},
	methods: {
		previewImage(current) {
			// 确保图片地址是HTTPS
			const urls = this.images.map(url => {
				if (url.startsWith('http://')) {
					return url.replace('http://', 'https://');
				}
				return url;
			});
			
			uni.previewImage({
				urls: urls,
				current: urls[current],
				indicator: 'number',
				loop: true,
				fail: (err) => {
					console.error('预览图片失败:', err);
					uni.showToast({
						title: '图片预览失败',
						icon: 'none'
					});
				}
			});
		},
		handleImageError(e) {
			console.error('图片加载失败:', e);
			uni.showToast({
				title: '图片加载失败',
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.image-preview {
	width: 100%;
	padding: 20rpx;
	
	.image-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}
	
	.image-item {
		width: calc(100% - 10rpx);
		height: 300rpx;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		
		.preview-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}
</style> 